<template>
	<!-- 沙龙 -->
	<view>
		<view>
			<image style="width: 100%;" mode="aspectFill" src="../../../static/shalong/sl1.png"></image>
		</view>
		<view class="detail_top">
			<view style="line-height: 50rpx;font-size: 30rpx;">沙龙预约</view>
			<view style="line-height: 30rpx;">-SALON APPOINTMENT-</view>
		</view>
		
		<view style="padding-right: 20rpx;"><u-icon label="更多" labelPos="left" labelSize="12" size="12" name="play-right-fill"></u-icon></view>
		<view style="display: flex;justify-content: space-between;flex-wrap: wrap;padding: 0rpx 20rpx 20rpx 20rpx;">
			<view class="card_item" v-for="item in 2" :key="item">
				<image mode="aspectFill" @click="goPage()" :src="item===1?'../../../static/shalong/sl2.png':'../../../static/shalong/sl3.png'" style="width: 100%;height: 341rpx;" />
				<view style="font-size: 15rpx;line-height: 30rpx;padding-left: 8rpx;display: flex;justify-content: space-between;align-items: center;">
					<view>
					<view style="font-size: 20rpx;">{{item===1?'明星专家说明会':'新品体脸沙龙'}}</view>
					<view>2023-11-21</view>
					</view>
					<view style="padding-right: 20rpx;">
						<u-icon label="广州" labelSize="12" size="12" name="map"></u-icon>
					</view>
				</view>
				<view class="yuyue-btn">预约</view>
			</view>
		</view>
		<view>
			<image style="width: 100%;" mode="aspectFit" src="../../../static/shalong/sl4.png"></image>
		</view>
		<view class="detail_top">
			<view style="line-height: 50rpx;font-size: 30rpx;">品牌联盟沙龙</view>
			<view style="line-height: 30rpx;">-BRAND JOINT-</view>
		</view>
		<view style="padding-right: 20rpx;"><u-icon label="更多" labelPos="left" labelSize="12" size="12" name="play-right-fill"></u-icon></view>
		<view class="shop_list">
			<view class="item item1"></view>
			<view class="item item2"></view>
			<view class="item item3"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model1: {
					userInfo: {
						name: '',
						sex: '',
					},
				},
			};
		},
		methods:{
			goPage(){
				uni.navigateTo({
					url:"./sl_detail"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.detail_top{
	width: 750rpx;
	height: 107rpx;
	margin-top: 7rpx;
	font-size: 20rpx;
	text-align: center;
}
.submit_footer{
	width: 100%;
	height: 313rpx;
	background: #FFFFFF;
	position: fixed;
	bottom: 0rpx;
	padding: 49rpx;
	left: 0rpx;
	.text{
		width: 660rpx;
		height: 78rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: #FF7575;
		line-height: 39rpx;
	}
	.btn{
		width: 656rpx;
		height: 90rpx;
		background: #000000;
		border-radius: 10rpx;
		color: #FDCE9A;
		line-height: 90rpx;
		text-align: center;
		font-size: 20rpx;
		margin-top: 75rpx;
	}
}
.card_item{
		width: 341rpx;
		height: 515rpx;
		background: #FFFFFF;
		box-shadow: 4rpx 4rpx 8rpx 2rpx rgba(197,197,197,0.25);
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin-top: 24rpx;
		.yuyue-btn{
			width: 254rpx;
			height: 39rpx;
			background: linear-gradient(180deg, #494949 0%, #000000 100%);
			border-radius: 4rpx;
			margin-top: 28rpx;
			color: #fff;
			text-align: center;
			margin-left: 34rpx;
			font-size: 20rpx;
			line-height: 39rpx;
		}
	}
.shop_list{
		display:flex;
		width: 100%;
		padding: 20rpx 31rpx;
		height: 309rpx;
		justify-content: space-between;
		.item{
			height: 100%;width: 209rpx;
			border-radius: 10rpx;
			position: relative;
			.item_bg{
				background: url('../../../static/shop/Intersect.png') no-repeat;background-size: 100% 100%;position: absolute;width: 101rpx;left:-2rpx;height: 41rpx;font-size: 15rpx;color: #664C1A;text-align: center;line-height: 41rpx;
			}
		}
		.item1{
			background: url('../../../static/shalong/sl5.png') no-repeat;
			background-size: cover;
		}
		.item2{
			background: url('../../../static/shalong/sl6.png') no-repeat;
			background-size: cover;
		}
		.item3{
			background: url('../../../static/shalong/sl7.png') no-repeat;
			background-size: cover;
		}
	}
</style>
